iT邦幫忙

2021 iThome 鐵人賽

DAY 6
0
Modern Web

網頁前端基礎&Vue.js系列 第 6

Html表單元素(DAY6)

  • 分享至 

  • xImage
  •  

我們在上一篇文章中介紹了input的text,Password,button,radio,checkbox,date元素
這篇文章將介紹其他表單元素,了解各個元素和屬性在網頁上的作用。

  • 認識各項input元素

Submit(送出按鈕):將表單資料送回伺服器端
Reset(重設按鈕):將表單元素清空或重回預設值
File(檔案上傳按鈕):可以利用accept屬性指定可上傳的檔案類型
Email(電子郵件輸入框)
Tel(電話號碼輸入框)
https://ithelp.ithome.com.tw/upload/images/20210917/20140225fE8mWaRx26.png

<form>
    <h1>報名資料填寫</h1><hr />
    報名檔案:<input type="file" name="file" accept=".pdf" autofocus><p>
    <!--accept屬性為限制使用者上傳的檔案類型-->
    電子郵件:<input type="email" name="mail" autocomplete="off" required></p>
    電話號碼:<input type="tel" name="tel" placeholder="請填寫09開頭" required>
    <p >
    <input type="submit" value="submit" name="submit">
    <input type="reset" value="reset" name="reset"/>
    </p>
</form>

補充:
在上面的範例中可以看到幾個屬性:

Autofocus:網頁開啟後自動聚焦此表單元素,讓使用者注意此元素
Autocomplete:是否要記得並自動填入之前表單元素的輸入值,off/on分別為關閉/開啟
Required:設定為必填,若未輸入將會有提示訊息,且無法送出表單
Placeholder:輸入的提示訊息,不會將此提示訊息設定成預設值

  • 認識textarea(文字區域)元素

常用在留言板等功能,提供多行文字的輸入框
<textarea name="" rows="" cols=""></textarea>
Rows:設定輸入框預設需要多少列
Cols: 設定輸入框預設需要多少行
https://ithelp.ithome.com.tw/upload/images/20210920/20140225GHtLn93UJg.png

<form>
    <h1>留言板</h1><hr />
    <textarea name="area" rows="8" cols="20" placeholder="右下角可調整輸入框大小喔"></textarea>
</form>
  • 認識select/option(下拉式)元素

<select name="" size=2 multiple>
    <option></option>
    <option></option>
    <option></option>
</select>

size:在選框中出現多少個項目,其他項目可經由下拉桿選取
multiple:可複選
https://ithelp.ithome.com.tw/upload/images/20210917/20140225ZjLcHPhYDm.png

<form>
   請選擇:
    <select name="select" size=2 multiple>
        <option>dog</option>
        <option>cat</option>
        <option>horse</option>
    </select>
</form>

結語

這篇文章介紹了表單的input、textarea、select/option元素,html的介紹和認識也到這邊告一個段落,接下來後面的幾篇文章將進入用來美化、排版網頁的CSS,讓網頁的樣子變得更有設計感。


上一篇
Html表單&表單元素(DAY5)
下一篇
認識與建立CSS樣式表(DAY7)
系列文
網頁前端基礎&Vue.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言